<template>
  <div>
    <div class="bgc">
      <!-- 快递单评价 -->
      <!-- 头部 -->
      <van-row class="header4" gutter="20">
        <van-col span="2">
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </van-col>
        <van-col span="18">
          <span>快递单评价</span>
        </van-col>
        <van-col span="4" @click="GetStarWeiData">
          <span>提交</span>
        </van-col>
      </van-row>
      <p class="biao">总体评分</p>
      <p class="valuefen">
        <span class="span1">{{ value * 2 }}</span>
        <span>分</span>
      </p>
      <!-- 评分 -->
      <div class="box-bd">
        <div class="border">
          <van-rate
            size="40px"
            v-model="value"
            :icon="img01"
            :void-icon="img02"
            gutter="35px"
          />
        </div>
      </div>
      <!-- 店铺评分 -->
      <div class="dianpu">
        <div class="dian">
          <span>店铺评分</span>
        </div>
        <!-- 打分 -->
        <div class="da">
          <div class="mgt">
            <span>店铺评分</span>
            <van-rate
              v-model="value1"
              :size="25"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <!-- 物流速度 -->
        <div class="da">
          <div class="mgt">
            <span>物流评分</span>
            <van-rate
              v-model="value2"
              :size="25"
              color="#ff8d5b"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <!-- 快递评分 -->
        <div class="da">
          <div class="mgt">
            <span>快递评分</span>
            <van-rate
              v-model="value3"
              :size="25"
              color="#ff5d5e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 文本域 -->
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      placeholder="写几句评价"
      show-word-limit
    />
    <!-- 上传图片 -->
    <div class="submitpicture">
      <van-uploader v-model="fileList" multiple />
    </div>
  </div>
</template>

<script>
import { PutStarData } from "@/request/api";
export default {
  data() {
    return {
      value: 0,
      value1: 0,
      value2: 0,
      value3: 0,
      message: "",
      img01: require("../assets/快递单评价切图/xiaolian.png"),
      img02: require("../assets/快递单评价切图/shangxin.png"),
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" }
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: "https://cloud-image", isImage: true }
      ]
    };
  },
  methods: {
    GetStarWeiData() {
      let totalScore = this.value;
      let shop = this.value1;
      let logistics = this.value2;
      let express = this.value3;
      let info = this.message;
      PutStarData({
        totalScore: totalScore,
        shop: shop,
        logistics: logistics,
        express: express,
        info: info,
        id: this.$route.query.id,
        orderCode: this.$route.query.orderCode
      }).then(res => {
      });
      this.$toast("评价成功");
      setTimeout(() => {
        this.$router.go(-1);
      },1500);
    }
  }
};
</script>
 
<style lang = "less" scoped>
.bgc {
  background-color: #fff;
}
.header4 {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  display: flex;

  .van-icon {
    font-size: 0.186667rem;
    vertical-align: -0.056667rem;
  }
}
.biao,
.valuefen {
  text-align: center;
}
.span1 {
  font-size: 0.4rem;
}
.valuefen {
  color: #ffcc33;
}
.van-rate {
  margin-left: 0.366667rem;
  padding-bottom: 0.133333rem;
}
.border {
  border-bottom: 1px solid #dddddd;
}
.box-bd {
  padding: 0 0.066667rem;
}
.dian {
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem 0.266667rem;
  border-bottom: 1px dashed #eeeeee;
}
.dianpu {
  padding: 0 0.066667rem;
}
.da {
  border-bottom: 1px dashed #eeeeee;
  .mgt {
    margin-top: 0.14rem;
    padding-left: 0.4rem;
    .van-rate {
      vertical-align: -0.053333rem;
    }
  }
}
.van-field {
  margin-top: 0.133333rem;
  height: 1.733333rem;
  border-bottom: 1px dashed #eeeeee;
}
.submitpicture {
  background-color: #fff;
}
</style>